<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <p:growl id="messages" showDetail="false" autoUpdate="true"  /> 
    <p:panel id="proprietarioPanel" styleClass="container_24 clearfix both withoutBorder">
        <h4 class="title">Dados Gerais</h4>

        <p:outputLabel id="personOutputLabel" value="Pessoa" styleClass="grid_3" style="top: 6px" rendered="#{!managerProprietario.readonly}" />
        <div class="grid_8">
            <p:selectOneRadio id="personRadioButton" value="#{managerProprietario.proprietario.tipoDocumento}" 
                              rendered="#{!managerProprietario.readonly}">
                <f:selectItems value="#{managerProprietario.tipoDocumentoList()}" />
                <p:ajax event="change" update="proprietarioPanel" />
            </p:selectOneRadio>
        </div>
        <div class="clear-both"/>

        <p:outputLabel id="tipoDocumentoLabel" for="tipoDocumentoInput"
                       value="#{managerProprietario.proprietario.tipoDocumento.name()}" 
                       styleClass="grid_3"/>
        <p:inputMask id="tipoDocumentoInput"
                     value="#{managerProprietario.pessoaFisica ? 
                              managerProprietario.proprietario.cpf : managerProprietario.proprietario.cnpj}"
                     mask="#{managerProprietario.pessoaFisica ? 
                             '999.999.999-99':'99.999.999/9999-99'}"
                     readonly="#{managerProprietario.readonly}" styleClass="grid_8" > 
        </p:inputMask>

        <p:outputLabel value="Data Nasc." styleClass="grid_3" for="dateNascCalendar" 
                       rendered="#{managerProprietario.pessoaFisica}" />
        <p:calendar id="dateNascCalendar" value="#{managerProprietario.proprietario.dataNasc}" showOn="both" 
                    locale="pt" yearRange="1900:2020" navigator="true" pattern="dd/MM/yyyy"
                    styleClass="grid_8" rendered="#{managerProprietario.pessoaFisica and !managerProprietario.readonly}" 
                    readonly="#{managerProprietario.readonly}"/>
        <p:inputText styleClass="grid_8" value="#{managerProprietario.proprietario.dataNasc}"
                     rendered="#{managerProprietario.pessoaFisica and managerProprietario.readonly}" readonly="#{managerProprietario.readonly}">
            <f:convertDateTime pattern="dd/MM/yyyy"/>
        </p:inputText>

        <div class="clear-both" style="#{managerProprietario.pessoaFisica ? '' : 'display:none'}"/>

        <p:outputLabel value="Nome" styleClass="grid_3" for="nomeInputText" 
                       rendered="#{managerProprietario.pessoaFisica}"/>
        <p:inputText id="nomeInputText" styleClass="grid_20 ajustInput"
                     value="#{managerProprietario.proprietario.nome}"
                     required="true" 
                     rendered="#{managerProprietario.pessoaFisica}" readonly="#{managerProprietario.readonly}"/>  

        <p:outputLabel value="RG" styleClass="grid_3" for="rgInputText" 
                       rendered="#{managerProprietario.pessoaFisica}" />
        <p:inputText id="rgInputText" styleClass="grid_8" value="#{managerProprietario.proprietario.rg}" 
                     rendered="#{managerProprietario.pessoaFisica}" readonly="#{managerProprietario.readonly}"/>

        <p:outputLabel value="Org. Emissor" styleClass="grid_3 orgaoEmissorLabelContribuinte" for="orgInputText" 
                       rendered="#{managerProprietario.pessoaFisica}" />
        <p:inputText id="orgInputText" styleClass="grid_8" value="#{managerProprietario.proprietario.orgaoEmissor}" 
                     rendered="#{managerProprietario.pessoaFisica}" readonly="#{managerProprietario.readonly}"/>
        <div class="clear" style="#{managerProprietario.pessoaFisica ? '' : 'display:none'}"/>

        <p:outputLabel value="Telefone" styleClass="grid_3" for="telefone"/>
        <p:inputText id="telefone" 
                     value="#{managerProprietario.proprietario.telefone}"
                     styleClass="grid_8" readonly="#{managerProprietario.readonly}"/>

        <p:outputLabel value="Estado Civil" styleClass="grid_3 estadoCivilLabel" id="estadoCivilOutputlabel"
                       rendered="#{managerProprietario.pessoaFisica}" for="estadoCivil" />
        <div class="grid_8" style="#{managerProprietario.readonly ? 'display:none' : ''}">
            <p:selectOneMenu id="estadoCivil" panelStyle="width:150px;"
                             rendered="#{managerProprietario.pessoaFisica}"
                             value="#{managerProprietario.proprietario.estadoCivil}" >
                <f:selectItem itemLabel="" itemValue="" />
                <f:selectItems value="#{managerUtilitario.estadoCivil}"/>
                <p:ajax update=":proprietarioForm:conjugePanel"/>
            </p:selectOneMenu> 
        </div>
        <p:inputText styleClass="grid_8" value="#{managerProprietario.proprietario.estadoCivil.nome}"
                     rendered="#{managerProprietario.pessoaFisica and managerProprietario.readonly}"
                     readonly="#{managerProprietario.readonly}"/>
        <div class="clear"/>

        <p:outputLabel value="Profissão" styleClass="grid_3" for="profissaoInputText" 
                       rendered="#{managerProprietario.pessoaFisica}" />
        <p:inputText id="profissaoInputText" styleClass="grid_8" value="#{managerProprietario.proprietario.profissao}" 
                     rendered="#{managerProprietario.pessoaFisica}" readonly="#{managerProprietario.readonly}"/>

        <p:outputLabel value="Local de Trabalho" styleClass="grid_3 localTrabalhoLabel" id ="localTrabalhoOutputlabel" for="localTrabalhoInputText" 
                       rendered="#{managerProprietario.pessoaFisica}" />
        <p:inputText id="localTrabalhoInputText" styleClass="grid_8 localTrabalhoInputTextContribuinte" 
                     value="#{managerProprietario.proprietario.localTrabalho}" 
                     rendered="#{managerProprietario.pessoaFisica}" readonly="#{managerProprietario.readonly}"/>
        <div class="clear"/> 

        <p:outputLabel value="Nome Fantasia" styleClass="grid_3 nomeFantasiaContribuinte"
                       for="nameFantasyInputText" rendered="#{managerProprietario.proprietario.tipoDocumento.tipo eq 'CNPJ'}" />
        <p:inputText id="nameFantasyInputText" styleClass="grid_20 ajustInput"
                     value="#{managerProprietario.proprietario.nomeFantasia}"
                     required="true" 
                     rendered="#{!managerProprietario.pessoaFisica}" 
                     readonly="#{managerProprietario.readonly}"/>
        <div class="clear"/>

        <p:panel id="conjugePanel" style="margin: -7px 0 0 -13px; padding: 0px">
            <p:outputLabel value="Cônjuge" styleClass="grid_3" for="conjuge" rendered="#{managerProprietario.pessoaFisica and managerProprietario.removerConjuge()}"/>
            <p:autoComplete id="conjuge" styleClass="grid_20 autocompleteConjuge" dropdown="true" converter="proprietarioconverter"
                            var="conjuge" itemLabel="#{conjuge.nome}"
                            itemValue="#{conjuge}" value="#{managerProprietario.proprietario.conjuge}"
                            scrollHeight="200" forceSelection="true" immediate="true"
                            rendered="#{managerProprietario.pessoaFisica and !managerProprietario.readonly and managerProprietario.removerConjuge()}"
                            completeMethod="#{managerProprietario.autocompleteConjuge}"/>
            <p:inputText styleClass="grid_20 ajustInput" value="#{managerProprietario.proprietario.conjuge.nome}" 
                         rendered="#{managerProprietario.pessoaFisica and managerProprietario.readonly and managerProprietario.removerConjuge()}"
                         readonly="#{managerProprietario.readonly}"/>
            <p:commandButton alt="Pesquisar" icon="ui-icon-plus"
                             rendered="#{managerProprietario.pessoaFisica and !managerProprietario.readonly and managerProprietario.removerConjuge()}"
                             oncomplete="dlgProprietario.show()" process="@this"/>
        </p:panel>
        <div class="clear"/>
        <br/>
    </p:panel>

    <p:panel id="addressPanel" style="margin-top: -25px;" 
             styleClass="container_24 clearfix both withoutBorder">
        <h4 class="title">Endereço</h4>

        <p:outputLabel value="CEP" styleClass="grid_3" for="cepInputMask" />
        <p:inputMask  id="cepInputMask" styleClass="grid_4" mask="99.999-999"
                      value="#{managerProprietario.proprietario.endereco.cep}" 
                      readonly="#{managerProprietario.readonly}"> 
            <p:ajax event="blur" update="addressPanel"  
                    listener="#{managerProprietario.existeEndereco()}" />
        </p:inputMask>
        <div class="clear"/>

        <p:outputLabel value="Logradouro" styleClass="grid_3 logradouroLabelContribuinte" for="patioInputText" />
        <p:inputText id="patioInputText" styleClass="grid_20" 
                     value="#{managerProprietario.proprietario.endereco.logradouro}" 
                     readonly="#{managerProprietario.readonly}"/>

        <p:outputLabel value="Bairro" styleClass="grid_3" for="bairroAutoComplete" />
        <p:autoComplete id="bairroAutoComplete" styleClass="grid_21" dropdown="true" converter="bairroconverter"
                        var="bairro" itemLabel="#{bairro.nome}"
                        itemValue="#{bairro}" value="#{managerProprietario.proprietario.endereco.bairroDne}"
                        scrollHeight="200" forceSelection="true" immediate="true"
                        rendered="#{managerProprietario.pessoaFisica and !managerProprietario.readonly}"
                        completeMethod="#{managerUtilitario.autocompleteBairroPorCidade}"/>
        <p:inputText id="bairroInputText" styleClass="grid_20" 
                     value="#{managerProprietario.proprietario.endereco.bairro}" 
                     rendered="#{managerProprietario.readonly}"
                     readonly="#{managerProprietario.readonly}"/>
        <div class="clearfix"/>

        <p:outputLabel value="Estado" styleClass="grid_3" for="estadoInputText" />
        <p:inputText id="estadoInputText" styleClass="grid_4"
                     value="#{managerProprietario.proprietario.endereco.uf}" 
                     readonly="#{managerProprietario.readonly}"/>

        <p:outputLabel value="Município" styleClass="grid_4 alpha" for="municipioInputText" />
        <p:inputText id="municipioInputText" styleClass="grid_12"
                     value="#{managerProprietario.proprietario.endereco.municipio}" 
                     readonly="#{managerProprietario.readonly}"/>

        <p:outputLabel value="Número" styleClass="grid_3" for="numInputText" />
        <p:inputText id="numInputText" styleClass="grid_4"
                     value="#{managerProprietario.proprietario.endereco.numero}" 
                     readonly="#{managerProprietario.readonly}"/>

        <p:outputLabel value="Complemento" styleClass="grid_4 alpha" for="complementInputText" />
        <p:inputText id="complementInputText" styleClass="grid_12" 
                     value="#{managerProprietario.proprietario.endereco.compl}" 
                     readonly="#{managerProprietario.readonly}"/>

    </p:panel>

    <p:panel id="socioEconomicoPanel" styleClass="container_24 clearfix withoutBorder" rendered="#{managerProprietario.pessoaFisica}">
        <h4 class="title">Sócio-econômico</h4>

        <fieldset>
            <legend>Tempo de Moradia</legend>  

            <p:outputLabel value="Residência" styleClass="grid_3" for="tempoMoradiaInputText" />
            <p:inputText id="tempoMoradiaInputText" styleClass="grid_8" readonly="#{managerProprietario.readonly}"
                         value="#{managerProprietario.proprietario.tempoMoradia}" />

            <p:outputLabel value="Município" styleClass="grid_3" for="tempoMoradiaMunicipioInputText" />
            <p:inputText id="tempoMoradiaMunicipioInputText" styleClass="grid_8" readonly="#{managerProprietario.readonly}"
                         value="#{managerProprietario.proprietario.tempoMoradiaMunicipio}" />
        </fieldset>
        <div class="clear"/>

        <fieldset>
            <legend>Família</legend>  

            <p:outputLabel value="Composição" styleClass="grid_3"/>
            <p:selectOneRadio styleClass="grid_8" layout="pageDirection" rendered="#{!managerProprietario.readonly}"
                              value="#{managerProprietario.proprietario.composicaoFamiliar}">
                <f:selectItems value="#{managerUtilitario.composicaoFamiliar}"/>
            </p:selectOneRadio>

            <p:inputText value="#{managerProprietario.proprietario.composicaoFamiliar.nome}" 
                         styleClass="grid_8" rendered="#{managerProprietario.readonly}"
                         readonly="#{managerProprietario.readonly}"/>

            <p:outputLabel value="Renda" styleClass="grid_3"/>
            <p:selectOneRadio styleClass="grid_8" layout="pageDirection" rendered="#{!managerProprietario.readonly}"
                              value="#{managerProprietario.proprietario.rendaFamiliar}">
                <f:selectItems value="#{managerUtilitario.rendaFamiliar}"/>
            </p:selectOneRadio>

            <p:inputText value="#{managerProprietario.proprietario.rendaFamiliar.nome.contains('salário') ?
                                  managerProprietario.proprietario.rendaFamiliar.nome :
                                  managerProprietario.proprietario.rendaFamiliar.nome.concat(' salários mínimos')}"
                         styleClass="grid_8" rendered="#{managerProprietario.readonly}"
                         readonly="#{managerProprietario.readonly}"/>
        </fieldset>
        <div class="clear"/>

        <fieldset>
            <legend>Participa do Programa Minha Casa Minha Vida ?</legend>  
            <p:selectOneRadio styleClass="grid_3" value="#{managerProprietario.proprietario.minhaCasaMinhaVida}"
                              rendered="#{!managerProprietario.readonly}">
                <f:selectItem itemLabel='Sim' itemValue="true" /> 
                <f:selectItem itemLabel='Não' itemValue="false" />
            </p:selectOneRadio>

            <p:outputLabel value="#{managerProprietario.proprietario.minhaCasaMinhaVida ? 'Sim' : 'Não'}"
                           styleClass="grid_2" rendered="#{managerProprietario.readonly}" />
        </fieldset>

        <fieldset>
            <legend>Participa do Programa Bolsa Família ?</legend>
            <p:selectOneRadio styleClass="grid_3" value="#{managerProprietario.proprietario.bolsaFamilia}"
                              rendered="#{!managerProprietario.readonly}">
                <f:selectItem itemLabel='Sim' itemValue="true" /> 
                <f:selectItem itemLabel='Não' itemValue="false" />
                <p:ajax event="change" update="bolsaFamiliaPanel" />
            </p:selectOneRadio>

            <p:outputLabel value="#{managerProprietario.proprietario.bolsaFamilia ? 'Sim' : 'Não'}"
                           styleClass="grid_2" rendered="#{managerProprietario.readonly}"/>

            <p:panel id="bolsaFamiliaPanel" styleClass="withoutBorder" 
                     style="#{managerProprietario.proprietario.bolsaFamilia eq false or managerProprietario.proprietario.bolsaFamilia eq null ? 'display: none' : ''}">
                <p:outputLabel styleClass="grid_3" value="Valor" for="valorBolsaFamilia" style="margin-left: 140px; top: 2px" />
                <p:inputText id="valorBolsaFamilia" styleClass="grid_4" value="#{managerProprietario.proprietario.valorBolsaFamilia}"
                             onkeypress="jQuery(this).autoNumeric({aSign:'R$ ', aSep: '.', aDec: ','} );" rendered="#{!managerProprietario.readonly}">
                    <f:convertNumber type="currency" locale="pt-BR"/>
                </p:inputText>
                <p:inputText id="valorBolsaFamilia2" styleClass="grid_4" value="#{managerProprietario.proprietario.valorBolsaFamilia}" 
                             readonly="#{managerProprietario.readonly}" rendered="#{managerProprietario.readonly}">
                    <f:convertNumber type="currency" locale="pt-BR"/>
                </p:inputText>
            </p:panel>
        </fieldset>

    </p:panel>

    <p:panel id="documentoPanel" styleClass="container_24 clearfix withoutBorder">

        <p:fileUpload id="fileUpload" rendered="#{!managerProprietario.readonly}"
                      mode="advanced" label="Anexar"
                      uploadLabel="Enviar"
                      cancelLabel="Cancelar"
                      fileUploadListener="#{managerProprietario.adicionarAnexo}"
                      multiple="false" auto="true"
                      allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                      dragDropSupport="true"
                      invalidFileMessage="Tipo de arquivo não suportado."
                      invalidSizeMessage="Tamanho do arquivo não é suportado"
                      immediate="true" update="documentoPanel, dlgAnexo"/>

        <fieldset>
            <legend>Anexos</legend>

            <p:panel styleClass="clearfix container_24" >

                <div class="my-simple-gallery">
                    <ui:repeat  value="#{managerProprietario.proprietario.anexos}" var="a">
                        <div class="grid_4">
                            <p:commandButton id="removeButton" alt="Remover" styleClass="ui-button-only button-remove"
                                             style="margin-right: 10px !important;"
                                             icon="ui-icon-trash" update=":proprietarioForm:documentoPanel" 
                                             process=":proprietarioForm:documentoPanel" rendered="#{!managerProprietario.readonly}"
                                             actionListener="#{managerProprietario.removerAnexo(a)}" />
                            <p:commandButton id="editarButton" alt="Editar" styleClass="ui-button-only button-edit"
                                             icon="ui-icon-pencil" rendered="#{!managerProprietario.readonly}"
                                             update=":proprietarioForm:documentoPanel, :proprietarioForm:dlgEditarAnexo" 
                                             process=":proprietarioForm:documentoPanel" oncomplete="dlgEditarAnexo.show()"
                                             actionListener="#{managerProprietario.editarAnexo(a)}" />
                            <p:commandButton id="restaurarButton" alt="Restaurar" styleClass="ui-button-only button-restore"
                                             icon="ui-icon-newwin" 
                                             rendered="#{a.editado and a.id ne null and managerLayout.habilitaEditarImagem}"
                                             onclick="dlgRestImagem.show()">
                                <f:setPropertyActionListener target="#{managerImagem.idAnexo}" value="#{a.id}"/>
                            </p:commandButton>

                            <figure itemprop="associatedMedia" class="grid_20" onclick="initPhoto();">
                                <a href="#{managerImagem.urlImagem(a)}" 
                                   itemprop="contentUrl" data-size="#{managerImagem.widthHeight(a)}" pid="#{a.id}">
                                    <img src="#{managerImagem.urlThumbnailImagem(a)}" 
                                         itemprop="thumbnail" class="image"/>
                                </a>
                                <figcaption itemprop="caption description">#{a.nomeExibicao}</figcaption>
                            </figure>
                        </div>
                    </ui:repeat>
                </div>

                <p:dialog id="dlgAnexo" width="640" widgetVar="dlgAnexo" modal="false" 
                          header="Anexo" styleClass="container_24 clearfix" 
                          closeOnEscape="true" closable="false" resizable="false" >

                    <p:outputLabel value="Nome" styleClass="grid_3" for="nomeAnexo"/>
                    <p:inputText id="nomeAnexo" value="#{managerProprietario.anexo.nomeExibicao}" styleClass="grid_20"/>
                    <div class="clear"/>

                    <p:outputLabel value="Tipo" styleClass="grid_3" for="tipoAnexo" />
                    <div class="grid_20">
                        <p:selectOneMenu id="tipoAnexo" panelStyle="width:150px;" 
                                         value="#{managerProprietario.anexo.tipoAnexo}">
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerUtilitario.tipoAnexo}"/>
                        </p:selectOneMenu>
                    </div>
                    <div class="clear"/>

                    <div class="buttonAction">
                        <p:commandButton value="Adicionar" actionListener="#{managerProprietario.adicionarAnexo()}"
                                         update="documentoPanel"
                                         process="dlgAnexo"
                                         oncomplete="dlgAnexo.hide();" icon="ui-icon-check"/>
                        <p:commandButton value="Cancelar" actionListener="#{managerProprietario.removerAnexo()}"
                                         process="@this" oncomplete="dlgAnexo.hide();" icon="ui-icon-close"/>
                    </div>

                    <script>
                        $(document).ready(function() {
                            $('#proprietarioForm\\:tipoAnexo_panel').removeAttr('style');
                            $('#proprietarioForm\\:tipoAnexo_panel').css('width', 510);
                        });
                    </script>

                </p:dialog>

                <p:dialog id="dlgEditarAnexo" width="640" widgetVar="dlgEditarAnexo" modal="true" 
                          header="Anexo" styleClass="container_24 clearfix" 
                          closeOnEscape="true" closable="false" resizable="false" >

                    <p:outputLabel value="Nome" styleClass="grid_3" for="nomeAnexoEditar"/>
                    <p:inputText id="nomeAnexoEditar" value="#{managerProprietario.anexo.nomeExibicao}" styleClass="grid_20"/>
                    <div class="clear"/>

                    <p:outputLabel value="Tipo" styleClass="grid_3" for="tipoAnexoEditar" />
                    <div class="grid_20">
                        <p:selectOneMenu id="tipoAnexoEditar" panelStyle="width:150px;" 
                                         value="#{managerProprietario.anexo.tipoAnexo}">
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerUtilitario.tipoAnexo}"/>
                        </p:selectOneMenu>
                    </div>
                    <div class="clear"/>

                    <div class="buttonAction">
                        <p:commandButton value="Salvar" actionListener="#{managerProprietario.atualizarAnexo}"
                                         update="documentoPanel" process="dlgEditarAnexo"
                                         oncomplete="dlgEditarAnexo.hide();" icon="ui-icon-check"/>
                        <p:commandButton value="Cancelar" oncomplete="dlgEditarAnexo.hide();" actionListener="#{managerProprietario.cancelarAnexo()}" 
                                         process="@this" icon="ui-icon-close"/>
                    </div>

                    <script>
                        $(document).ready(function() {
                            $('#proprietarioForm\\:tipoAnexoEditar_panel').removeAttr('style');
                            $('#proprietarioForm\\:tipoAnexoEditar_panel').css('width', 510);
                        });
                    </script>

                </p:dialog>
            </p:panel>
        </fieldset>
    </p:panel>

</html>